<template>
	<view>
		<van-cell-group>
			<view v-for="(item,index) in addressList" :key="item.id">
				<van-swipe-cell right-width="65" :name="item.id">
					<van-cell :title="item.name" :value="item.tel" :label="item.address" clickable @click="addressIndex=index">
						<template #extra>
							<van-icon size="1.2rem" name="records" @click="onEdit(item.id)" />
						</template>
					</van-cell>
					<template #right>
						<van-icon color="#DD524D" style="position: relative; top: 20rpx;" size="2rem" @click="onDelete(item.id)" name="close" />
					</template>
				</van-swipe-cell>
			</view>
		</van-cell-group>
		<!-- 修改地址 -->
		<van-action-sheet :show="editAddress" title="修改地址" @click-overlay="editAddress=false" @close="editAddress=false">
			<van-field :value="edit.name" @input="onChangeEditName" label="收货人" />
			<van-field :value="edit.tel" @input="onChangeEditTel" type="tel" label="手机号" />
			<van-field :value="edit.address" @input="onChangeEditAddress" label="送货地址" />
			<button class="button" @click="onClickEdit(edit.id)">确认修改</button>
			<view class="safeView"></view>
		</van-action-sheet>
		<!-- 编辑地址 -->
		<van-action-sheet :show="addAddress" title="添加地址" @click-overlay="addAddress=false" @close="addAddress=false">
			<van-field :value="add.name" @input="onChangeName" label="收货人" />
			<van-field :value="add.tel" @input="onChangeTel" type="tel" label="手机号" />
			<van-field :value="add.address" @input="onChangeAddress" label="送货地址" />
			<button class="button" @click="onClickAdd">确认添加</button>
			<view class="safeView"></view>
		</van-action-sheet>
		<button class="button" plain type="primary" :disabled="addAddress" @click="addAddress=true">添加地址</button>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				addressList:[],
				//添加地址
				add:{
					name:'',
					tel:'',
					address:''
				},
				addAddress:false,
				//修改地址
				editAddress:false,
				edit:{
					id:'',
					name:'',
					tel:'',
					address:''
				}
			}
		},
		onLoad(){
			const that=this;
			that.getAddress();
		},
		methods:{
			//get
			getAddress(){
				const that=this;
				wx.showLoading();
				wx.request({
					url:that.myConfig.apiUrl+'/getAddress.php',
					data:{
						openId:that.myConfig.openId
					},
					success:function(res){
						wx.hideLoading();
						console.log('getAddress',res);
						that.addressList=res.data.addressList;
						for(let i=0;i<that.addressList.length;i++){
							that.addressList.changeTo={name:'',tel:'',address:''};
						}
					},
					fail:function(){
						that.myConfig.err();
					}
				});
			},
			//删除
			onDelete(id){
				const that=this;
				uni.showModal({
					title:'林大干饭人',
					content:'你确认要删除吗',
					cancelText:'点错了',
					confirmText:'确认删除',
					success:function(mod){
						if(mod.confirm){
							wx.showLoading();
							wx.request({
								url:that.myConfig.apiUrl+'/deleteLocation.php',
								method:'POST',
								data:{
									openId:that.myConfig.openId,
									id:id
								},
								success:function(res){
									wx.hideLoading();
									console.log('deleteLocation',res);
									wx.showToast({
										title:'删除成功',
										icon:'none',
										duration:1200
									});
									that.getAddress();
								},
								fail:function(){
									wx.hideLoading();
									that.myConfig.err();
								}
							});
						}
					}
				});
			},
			//编辑
			onEdit(id){
				const that=this;
				for(let i=0;i<that.addressList.length;i++){
					if(that.addressList[i].id==id){
						that.edit=that.myConfig.cloneObj(that.addressList[i]);
						that.editAddress=true;
						that.edit=that.myConfig.cloneObj(that.addressList[i]);
						break;
					}
				}
			},
			//确认添加地址
			onClickAdd(){
				const that=this;
				if(that.add.name==''||that.add.tel==''||that.add.address==''){
					uni.showToast({
						title:'请完善信息',
						icon:'none',
						duration:1200
					});
					return ;
				}
				if((that.add.tel+'').length!=11){
					uni.showToast({
						title:'手机号格式错误',
						icon:'none',
						duration:1200
					});
					return ;
				}
				wx.showLoading();
				wx.request({
					url:that.myConfig.apiUrl+'/setLocation.php',
					method:'POST',
					data:{
						openId:that.myConfig.openId,
						name:that.add.name,
						tel:that.add.tel,
						address:that.add.address,
					},
					success:function(res){
						wx.hideLoading();
						console.log('setLocation',res);
						wx.showToast({
							title:'添加成功',
							icon:'none',
							duration:1200
						});
					},
					fail:function(){
						wx.hideLoading();
						that.myConfig.err();
					},
				});
				that.addAddress=false;
				that.add={
					name:'',
					tel:'',
					address:''
				};
				that.getAddress();
			},
			//确认修改地址
			onClickEdit(id){
				const that=this;
				if(that.edit.name==''||that.edit.tel==''||that.edit.address==''){
					uni.showToast({
						title:'请完善信息',
						icon:'none',
						duration:1200
					});
					return ;
				}
				if((that.edit.tel+'').length!=11){
					uni.showToast({
						title:'手机号格式错误',
						icon:'none',
						duration:1200
					});
					return ;
				}
				wx.showLoading();
				wx.request({
					url:that.myConfig.apiUrl+'/changeLocation.php',
					method:'POST',
					data:{
						id:id,
						openId:that.myConfig.openId,
						name:that.edit.name,
						tel:that.edit.tel,
						address:that.edit.address,
					},
					success:function(res){
						wx.hideLoading();
						console.log('changeLocation',res);
						wx.showToast({
							title:'修改成功',
							icon:'none',
							duration:1200
						});
					},
					fail:function(){
						wx.hideLoading();
						that.myConfig.err();
					},
				});
				that.editAddress=false;
				that.edit={
					id:'',
					name:'',
					tel:'',
					address:''
				};
				that.getAddress();
			},
			//v-model
			onChangeName(value){
				const that=this;
				that.add.name=value.detail;
			},
			onChangeTel(value){
				const that=this;
				that.add.tel=value.detail;
			},
			onChangeAddress(value){
				const that=this;
				that.add.address=value.detail;
			},
			onChangeEditName(value){
				const that=this;
				that.edit.name=value.detail;
			},
			onChangeEditTel(value){
				const that=this;
				that.edit.tel=value.detail;
			},
			onChangeEditAddress(value){
				const that=this;
				that.edit.address=value.detail;
			}
		}
	}
</script>

<style scoped>
	.button{
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		width: 90%;
	}
</style>
